<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>マスター登録</title>
    <link type="text/css" rel="stylesheet" href="csslib/style.css" />
    <script type="text/javascript" src="jslib/jquery.min.js"></script>
    <script type="text/javascript">
	//<![CDATEA[
	var mod = "add";
	var query = {};
	query["mode"] = mode;
	////////////
	//[1] 画面ロード時の処理定義
	////////////
	
	
	function pageLoaded(){

		$("#empno").focus();
		//1 カーソルを社員番号フィールドにセット
		
		$("#crud").click(function(e){
			//3 登録　参照　更新　削除のラジオボタンどれがクリックで以下の初期化を行なう
			mode = e.target.id;
			//イベントオブジェクト(e)からイベント発生ノードのIDを取得する
			query["mode"] = mode;
			//処理モード (登録　参照　更新　削除)をサーバー送信パラメーターにセット
			clear();	//画面フィールドクリア
			$("#status").text(" ");	//ステータス表示フィールドクリア
			$("#empno").focus(); 	//カーソルを社員番号入力フィ０−ルドにセット
		});

		
		$("#empno").keyup(function(){
			//4 社員番号５桁入力時にmode(登録　参照　更新　削除)に対応した処理を行なう
	
			if($("#empno").val().length == 5){
				//社員番号5桁で処理開始
				if( mode == "rev" || mode == "upd" || mode == "del" ){
					//alert("not added");
				//モードが参照　更新　削除の時は社員データを表示
				query["empno"] = $("#empno").val();
				$.get("/crud", query, read); //社員番号をキーに参照リクエストサーバー送信
													//サーバーレスポンス受信で関数readを呼び出す
					
				} else if ( mode == "add"){
					//alert("this is add!!");
					$("#empname").focus();
					
				}
			}
		});
	}
	////////////////////////
	// [2] 関数呼び出しによる処理定義
	////////////////////////
	function read(resp){
		//サーブレットのレスピンスデータ(resp)で参照を行なう
		var items = resp.split("<i>");
			//サーバーからの受信データを.プロパティ単位で配列itemsにセット
		if ( items[0] == "NO") {
			//BigTable検索でエンティティがなかった倍の処理
			clear();
			$("#status").text(items[1]);
		} else {
			//BigTable検索でエンティティがあった場合の処理
			var i = 0;
			$.each(["empname", "depart", "section"], function(){
				//社員名　所属部　所属かを入力フィールドに表示
				$("#" + this).val(items[i++]);
			});
			$("#date").text(items[3]);	//更新日時を表示
			$("#status").text(items[4]);
		}
	}
	
	function asyn(e){
	// 6処理モード（登録　参照　更新　削除）に対してサーブレットとの非同期通信を行なう
		if (e.keyCode == 27 ) { //ESCキー押して処理を開始
			query["empno"] = $("#empno").val();
			if(mode == "add" || mode == "upd") {
				//モードが登録または更新の場合、入力フィールドのデータを連想配列queryにセット
				query["empname"] = $("#empname").val();
				query["depart"] = $("#depart").val();
				query["section"] = $("#section").val();
				$.post("/crud", query, function(resp){
					//postモードで非同期通信を行なう、レスポンス受信で関数respを呼び出す
					$("#status").text(resp);
					clear();
				});
			} else if (mode == "del"){
			//モードが削除の場合
				$.post("/crud", query, function(resp){
				$("#status").text(resp);
				clear();
			});
			}
		}
	}
	
	// 7 社員情報の入力フィールドをクリアリセットする
	function clear(){
		$.each(["empno", "empname", "depart", "section"], function(){
			$("#" + this).val("");
		});
		$("#date").text("");
		$("#empno").focus();
	}
	//]]
	</script>
  </head>

  <body onload="pageLoaded();">
  <table width="287" border="1" cellspacing="0" cellpadding="1">
  <thead id="crud">
    <tr>
      <th colspan="2">社員マスター管理</th>
    </tr>
    <tr>
      <th colspan="2">
      	<input type="radio" name="op" id="add" checked="checked" /> 登録
        <input type="radio" name="op" id="rev" /> 参照
      	<input type="radio" name="op" id="upd" /> 更新
       	<input type="radio" name="op" id="del" /> 削除
      </th>
    </tr>
    </thead>
    <tbody id="data" onkeydown="asyn(event);">
    <tr>
      <th width="93">社員番号</th>
      <td width="184"><input type="text" name="empno" id="empno" tabindex="1" /></td>
    </tr>
    <tr>
      <th>社員氏名</th>
      <td><input type="text" name="empname" id="empname" tabindex="2" /></td>
    </tr>
    <tr>
      <th>所属部</th>
      <td><input type="text" name="depart" id="depart" tabindex="3" /></td>
    </tr>
    <tr>
      <th>所属課</th>
      <td><input type="text" name="section" id="section" tabindex="4" /></td>
    </tr>
    <tr>
      <th>更新日時</th>
      <td id="date">&nbsp;</td>
    </tr>
    <tr>
      <th>ステータス</th>
      <td id="status">&nbsp;</td>
    </tr>
    </tbody>
  </table>
  </body>
</html>
